{{ define "public/header.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/admin/css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin/css/app.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin/element/index.css" rel="stylesheet">
    <link href="/static/admin/css/base.css" rel="stylesheet">
    <script src="/static/admin/element/vue.js"></script>
    <script src="/static/admin/element/index.js"></script>
    <script src="/static/admin/js/axios.min.js"></script>
    <script src="/static/components/base.component.js?v={{.v}}"></script>
    <script src="/static/admin/libs/jquery/jquery.min.js"></script>
    <script src="/static/admin/libs/metismenu/metisMenu.min.js"></script>
    <script src="/static/admin/js/js.cookie.min.js"></script>
    <script src="/static/admin/js/common.js?v={{.v}}"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const base_url = Vue.prototype.base_url;
        const base_dir = '';//勿要删除
    </script>
</head>


<body>
<header id="page-topbar" style="position:fixed;left:0; top:0; z-index:999;" v-cloak>
    <div class="navbar-header">
        <div class="d-flex">
            <div class="navbar-header">
                <div class="d-flex" data-toggle="cospan">
                    <i style="margin-left:15px;" id="vertical-menu-btn" class="el-icon-s-fold"></i>
                    <i style="margin-left:15px;" @click="reload" class="el-icon-refresh hidden-sm-and-down"></i>
                </div>
                <!--				<div class="d-flex hidden-sm-and-down">-->
                <!--					<el-breadcrumb separator="/" style="margin-left:30px;">-->
                <!--						<el-breadcrumb-item v-for="item in levelList" :key="item.path">-->
                <!--							<a v-if="item.title == '首页'" :href="item.path">grger</a>-->
                <!--							<span v-else>gergerg</span>-->
                <!--						</el-breadcrumb-item>-->
                <!--					</el-breadcrumb>-->
                <!--				</div>-->
            </div>
        </div>
        <div class="d-flex">
            <div class="iconbutton">
                <el-tooltip content="清除缓存" effect="dark" placement="bottom">
                    <i @click="clearCache()" class="icontool el-icon-delete"></i>
                </el-tooltip>
            </div>

            <div class="iconbutton">
                <el-avatar src="/static/admin/images/logo.png" style="vertical-align:middle"></el-avatar>
                <el-dropdown trigger="click" placement="bottom" style="cursor: pointer;margin-right:15px;">
					<span class="el-dropdown-link">{{ "{{username}}"}}<i style="margin-left:0px; font-size:100%" class="icontool el-icon-arrow-down"></i>
					</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-lock" @click.native.prevent="passwordDialogStatus = true">修改密码
                        </el-dropdown-item>
                        <el-dropdown-item icon="el-icon-back" @click.native.prevent="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="iconbutton" style="margin-left:0">
                <i class="bx bx-cog bx-spin right-bar-toggle"></i>
            </div>
        </div>
    </div>

    <el-dialog title="重置密码" style="margin-top:100px;" width="450px" :visible="passwordDialogStatus"
               :before-close="closeForm" append-to-body>
        <el-form :size="size" ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="新密码" prop="password">
                        <el-input show-password autoComplete="off" v-model="form.password" clearable
                                  placeholder="请输入密码"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="确认密码" prop="repassword">
                        <el-input show-password autoComplete="off" v-model="form.repassword" clearable
                                  placeholder="请输入确认密码"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="size" :loading="loading" type="primary" @click="submit">
                <span v-if="!loading">确 定</span>
                <span v-else>提 交 中...</span>
            </el-button>
            <el-button :size="size" @click="closeForm">取 消</el-button>
        </div>
    </el-dialog>
</header>

<script>
    new Vue({
        el: '#page-topbar',
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                form: {
                    password: '',
                    repassword: '',
                },
                username:"",
                url: {},
                levelList: [],
                notice: [],
                passwordDialogStatus: false,
                loading: false,
                size: 'small',
                urlobj: {},//这里是判断如果是弹窗链接的话 不显示头部
                rules: {
                    password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
                    repassword: [
                        {required: true, validator: validatePass2, trigger: 'blur'},
                    ],
                }
            }
        },
        mounted() {
            if (sessionStorage.getItem(base_url + 'breadcrumb')) {
                const menuList = JSON.parse(sessionStorage.getItem(base_url + 'breadcrumb'))
                this.url = new URL(window.location.href)
                let menus = this.getMenus(menuList)
                let home = [{title: '首页', path: base_url + '/admin/index/main'}]
                if (menus !== undefined) {
                    if (this.url.pathname !== base_url + '/admin/index/main' && this.url.href !== base_url + '/admin/index/main') {
                        menus = home.concat(menus)
                    }
                } else {
                    menus = home
                }

                this.levelList = menus
            }

            //加载登录用户
            this.getNickname()
        },
        methods: {
            getMenus(menuList, arr, z) {
                arr = arr || []
                z = z || 0
                for (let i = 0; i < menuList.length; i++) {
                    let item = menuList[i]
                    arr[z] = item
                    if (this.url.pathname === menuList[i].url || this.url.href === menuList[i].url) {
                        return arr.slice(0, z + 1)
                    }
                    if (menuList[i].children && menuList[i].children.length) {
                        let res = this.getMenus(menuList[i].children, arr, z + 1)
                        if (res) {
                            return res
                        }
                    }
                }
            },
            submit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        axios.post(base_url + '/admin/base/resetPwd', this.form).then(res => {
                            if (res.data.status == 200) {
                                this.$message({message: '操作成功', type: 'success'})
                                this.closeForm()
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        }).catch(() => {
                            this.loading = false
                        })
                    }
                })
            },
            closeForm() {
                this.passwordDialogStatus = false
                this.loading = false
                if (this.$refs['form'] !== undefined) {
                    this.$refs['form'].resetFields()
                }
            },
            clearCache() {
                this.$confirm('确定清除缓存吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(base_url + '/admin/base/clearCache').then(res => {
                        if (res.data.status == 200) {
                            this.$message({message: '操作成功', type: 'success'})
                        }
                    })
                })
            },
            logout() {
                this.$confirm('确定注销并且退出系统?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(base_url + '/admin/login/logout').then(res => {
                        if (res.data.status == 200) {
                            sessionStorage.setItem(base_url + 'breadcrumb', '')
                            Cookies.set(base_url + 'menu', '')
                            top.parent.frames.location.href = base_url + '/admin/login/index'
                        }
                    })
                })
            },
            reload() {
                location.reload()
            },
            getNickname(){
                this.username = sessionStorage.getItem("nickname")
            },
        },
    })
</script>
{{ end }}